<template>
	<view class="videoVue relative">
		<video id="videoId" :src="videoUrl" autoplay controls :show-fullscreen-btn="false"></video>
		<cover-image 
			class="quit absolute" 
			src="../static/close.png" 
			@click="quit()" 
			:style="{ top: menuButtonTop + 'px', width: menuButtonHeight + 'px', height: menuButtonHeight + 'px'}"
		></cover-image>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				videoContext: null,
				videoUrl: "",
				menuButtonTop: 0,
				menuButtonHeight: 0
			}
		},
		mounted() {
			let _this = this
			wx.getSystemInfo({
				success(res){    
					// 获取胶囊信息
					let menuButtonObject = wx.getMenuButtonBoundingClientRect();
					_this.menuButtonTop = menuButtonObject.top//胶囊距离顶部距离
					_this.menuButtonHeight = menuButtonObject.height//胶囊距离顶部距离
					console.log(_this.menuButtonTop, _this.menuButtonHeight)
				}
			})
		},
		onLoad(option) {
			this.videoUrl = option.value
			this.videoContext = uni.createVideoContext('videoId', this)
			this.videoContext.src = option.value
			this.videoContext.play()
		},
		methods: {
			quit(){
				this.videoContext = null
				this.videoUrl = ""
				this.$tools.back()
			}
		}
	}
</script>

<style lang="less" scoped>
	.videoVue {
		width: 100vw;
		height: 100vh;
		background: #000;
		video {
			width: 100vw;
			height: 100vh;
		}
		.quit {
			left: 30rpx;
			z-index: 999;
			background: #fff;
			border-radius: 50%;
		}
	}
</style>